<template>
  <div class="demo">
    <div class="demo-title">表单布局</div>
    <div class="demo-content">
      <Form :layout="formState.layout" :model="formState" v-bind="formItemLayout">
        <Form.Item label="Form Layout">
          <Radio.Group v-model:value="formState.layout">
            <Radio.Button value="horizontal">Horizontal</Radio.Button>
            <Radio.Button value="vertical">Vertical</Radio.Button>
            <Radio.Button value="inline">Inline</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="Field A">
          <Input v-model:value="formState.fieldA" placeholder="input placeholder" />
        </Form.Item>
        <Form.Item label="Field B">
          <Input v-model:value="formState.fieldB" placeholder="input placeholder" />
        </Form.Item>
        <Form.Item :wrapper-col="buttonItemLayout.wrapperCol">
          <Button type="primary">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, reactive } from 'vue';
  import type { UnwrapRef } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Radio from '@sscd/radio';
  import Form from '@sscd/form';
  interface FormState {
    layout: 'horizontal' | 'vertical' | 'inline';
    fieldA: string;
    fieldB: string;
  }
  const formState: UnwrapRef<FormState> = reactive({
    layout: 'horizontal',
    fieldA: '',
    fieldB: '',
  });
  const formItemLayout = computed(() => {
    const { layout } = formState;
    return layout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : {};
  });
  const buttonItemLayout = computed(() => {
    const { layout } = formState;
    return layout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : {};
  });
</script>
